@use '~@angular/material' as mat;
@import '../../../styles/themes/bag-theme';

.objective {
  background-color: mat.get-color-from-palette($md-primary, 500);
  color: mat.get-contrast-color-from-palette($md-primary, 500);
}

.objective-inactive {
  color: mat.get-contrast-color-from-palette($md-primary, 500);
  font-style: italic;
  background: repeating-linear-gradient(45deg,
    transparent,
    transparent 10px,
    mat.get-color-from-palette($md-primary, 600) 10px,
    mat.get-color-from-palette($md-primary, 500) 20px) linear-gradient(to bottom,
    mat.get-color-from-palette($md-primary, 700),
    mat.get-color-from-palette($md-primary, 900)) fixed top left;
}

.objective-title {
  font-size: medium;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.objective-progressBar {
  flex: 1.0 0.4 230px;
}

.mat-expansion-panel,
.mat-expansion-panel-header {
  padding: 0 0;
  background-color: whitesmoke
}

.header-padding {
  padding: 16px 16px;
}

.progress-bar {
  margin: 0 8px;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
}

.on-track {
  background: #2dc937;
  color: black;
}

.in-danger {
  background: #fafa41;
  color: black;
}

.off-track {
  background: #ff6666;
  color: black;
}

.h-6 {
  height: 6px;
}

.margin-expansion-panel {
  margin: 16px 6px 8px 6px;
}

.objective-title-flex {
  flex: 3.0 0.4 256px;
}

@media only screen and (max-width: 480px) {
  .circle {
    display: none;
  }

  .objective-progressBar {
    margin-right: 28px;
  }

  .objective-title {
    max-width: 65%;
  }
}

@media only screen and (max-width: 900px) {
  .circle {
    display: none;
  }

  .objective-title-flex {
    flex: 3.0 0.4 100%;
  }
}
